/**
 * Created by YJH on 2018/5/25.
 */
import {Button,} from 'react-native';
import React, {Component} from 'react';
import HomePage from '../pages/HomePage'
import TencentPage from '../pages/TencentPage'
import AlibabaPage from '../pages/AlibabaPage'
import BaiduPage from '../pages/BaiduPage'
import JavaPage from '../pages/JavaPage'
import PythonPage from '../pages/PythonPage'
import IosPage from '../pages/IosPage'
import ZaoyuanPage from '../pages/ZaoyuanPage'
import GaomidianbeiPage from '../pages/GaomidianbeiPage'
import {StackNavigator, TabNavigator, DrawerNavigator, TabBarBottom} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'

// class TabBarComponent extends Component {
//     constructor(props) {
//         super(props);
//         this.theme = {
//             tintColor: props.activeTintColor,
//             updateTime: new Date().getTime(),
//         }
//     }
//
//     render() {
//         // const {routes, index} = this.props.navigationState;
//         // const {theme} = routes[index].params;
//         // if (theme && theme.updateTime > this.theme.updateTime) {
//         //     this.theme = theme;
//         // }
//         return (<TabBarBottom
//             {...this.theme}
//             activeTintColor={this.theme.tintColor || this.props.activeTintColor}
//         />);
//     }
// }

export const AppDrawerNavigator = DrawerNavigator({

    ZaoyuanPage: {
        screen: ZaoyuanPage,
        navigationOptions: {
            drawerLabel: '枣园',
            drawerIcon: ({tintColor}) => {
                <MaterialIcons
                    name={'drafts'}
                    size={24}
                    style={tintColor}/>
            }
        }
    },
    GaomidianbeiPage: {
        screen: GaomidianbeiPage,
        navigationOptions: {
            drawerLabel: '高米店北',
            drawerIcon: ({tintColor}) => {
                <MaterialIcons
                    name={'drafts'}
                    size={24}
                    style={tintColor}/>
            }
        }
    },
});

export const AppTabNavigator = TabNavigator({

        JavaPage: {
            screen: JavaPage,
            navigationOptions: {
                tabBarLabel: '北京',
                tabBarIcon: ({tintColor, focused}) =>
                    <Ionicons
                        name={focused ? 'ios-home' : 'ios-home-outline'}
                        size={20}
                        style={{color: tintColor}}
                    />
                ,
            },

        },

        PythonPage: {
            screen: PythonPage,
            navigationOptions: {
                tabBarLabel: '上海',
                tabBarIcon: ({tintColor, focused}) =>
                    <Ionicons
                        name={focused ? 'ios-people' : 'ios-people-outline'}
                        size={20}
                        style={{color: tintColor}}
                    />
                ,
            },
        },

        IosPage: {
            screen: IosPage,
            navigationOptions: {
                tabBarLabel: '郑州',
                tabBarIcon: ({tintColor, focused}) =>
                    <Ionicons
                        name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
                        size={20}
                        style={{color: tintColor}}
                    />
                ,
            },
        },
    },
    {
        tabBarPosition: 'bottom',
        // tabBarComponent: TabBarComponent,
    });


export const AppStackNavigator = StackNavigator({

    HomePage: {
        screen: HomePage,
    },
    TencentPage: {
        screen: TencentPage,
        navigationOptions: {
            // header:null,
            title: '腾讯官方',
        },
    },
    AlibabaPage: {
        screen: AlibabaPage,
        navigationOptions: ({navigation}) => ({
            // title: `${navigation.state.params.name}`
        })
    },
    BaiduPage: {
        screen: BaiduPage,
        navigationOptions: (props) => {
            // header:null,
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;

            return {
                title: params.title ? params.title : 'title is null',
                headerRight: (<Button
                    title={params.mode === 'input' ? '保存' : '编辑'}
                    onPress={() => {
                        setParams({mode: params.mode === 'input' ? '' : 'input'})
                    }}/>)
            }
        },
    },
    TabNavi: {
        screen: AppTabNavigator,
        navigationOptions: {
            title: 'AppTabNavigator'
        }
    },
    AppDrawerNavigator: {
        screen: AppDrawerNavigator,
        navigationOptions: {
            title: 'AppDrawerNavigator'
        }
    }
})


